<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('Scanning')" left-arrow fixed @click-left="onClickLeft" />

    <div class="qr-scanner">
      <div class="box">
          <div class="line"></div>
          <div class="angle"></div>
      </div>
      <div class="toolBox">
        <div class="circle" @click="onLightTrigger">
          <i class="iconfont iconlight"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code:this.$route.query.code,
      sn: "",
      light: false,
    };
  },
  beforeDestroy() {
    //恢复之前的背景
    document.getElementById("app").style.backgroundColor = "#f7f7f7";
    document.querySelector("body").style.backgroundColor = "#f7f7f7";
    QRScanner.hide();
    QRScanner.destroy();
  },
  mounted() {
    document.getElementById("app").style.backgroundColor = "transparent";
    document.querySelector("body").style.backgroundColor = "transparent";
    this.onScan();
  },
  methods: {
    onClickLeft() {
      if(this.code==1){
        this.$router.push({ path: "/scan" });
      }else if(this.code==2){
        this.$router.push({ path: "/bindsn" });
      }else{
        this.$router.push({ path: "/wifi" });
      }
    },
    onScan() {
      QRScanner.destroy();
      QRScanner.prepare((err, status) => {
        if (status.authorized) {
          QRScanner.scan((err, contents) => {
            if (err) {
              console.log(err);
            } else {
              if(this.code==1){
                this.$router.push({path:'/scan',query:{'sn':contents}});
              }else if(this.code==2){
                this.$router.push({ path: "/bindsn",query:{'sn':contents}});
              }else{
                this.$router.push({ path: "/wifi",query:{'sn':contents}});
              }
              qrScanner.hide();
            }
          });
          QRScanner.show();
        } else if (status.denied) {
          // The video preview will remain black, and scanning is disabled. We can
          // try to ask the user to change their mind, but we'll have to send them
          // to their device settings with `QRScanner.openSettings()`.
          console.log(JSON.stringify(status.denied));
        } else {
          // we didn't get permission, but we didn't get permanently denied. (On
          // Android, a denial isn't permanent unless the user checks the "Don't
          // ask again" box.) We can ask again at the next relevant opportunity.
          console.log('无权限');
        }
      });
    },
    /**
     * 手电筒开关
     */
    onLightTrigger() {
      try {
        if (!this.light) {
          QRScanner.enableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 打开手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 打开手电筒状态：" + JSON.stringify(status));
          });
        } else {
          QRScanner.disableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 关闭手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 关闭手电筒状态：" + JSON.stringify(status));
          });
        }
      } catch (e) {
        console.log("[Scan.vue] " + JSON.stringify(e));
        return;
      }
      this.light = !this.light;
    },
  },
};
</script>

<style scoped lang="less">
.qr-scanner {
  background-image:
      linear-gradient(0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent),
      linear-gradient(90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent);
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  height: 100%;
  top:0;
  position: absolute;
}

.qr-scanner .box {
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -45%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
      transform: translateY(-100%);
  }

  100% {
      transform: translateY(0);
  }
}
.toolBox{
  width:100%;
  height: 50px;
  position:absolute;
  top: 82%;
  .circle{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    line-height: 50px;
    background: #ccc;
    i{
      font-size: 34px;
      color: #fff;
    }
  }
}
</style>